<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id='app'>

        <ul>
            <!-- v-for 可以遍历数字 -->
            <li v-for="num in 5">{{num}}</li>
        </ul>

        <ul>
            <!-- v-for 可以遍历字符串 -->
            <li v-for="(str,index) in '你好中国'">{{index}} - {{str}}</li>
        </ul>

        <ul>
            <!-- v-for 可以遍历字符串 值：key -->
            <li v-for="(val,key) in user">{{key}}-{{val}}</li>
        </ul>

        <ul>
            <!-- v-for 可以遍历字符串 -->
            <li v-for="(item, index) in list">{{item}}</li>
        </ul>


        <ul>
            <li v-for="item in arr">
                <h3>{{item.title}}</h3>
                <p v-for="str in item.proList"> {{str}} </p>
            </li>
        </ul>


    </div>
</body>
<script>
   const app = {
        data() {
            return {
                user: {
                    name: '老吴',
                    age: 18
                },
                list: ['黄焖鸡', '黄焖排骨', '黄焖鸭', '黄焖鱼', '黄焖肥肠'],
                arr: [
                    {
                        title: '华为',
                        proList: ['华1', '华2', '华3', '华4']
                    },
                    {
                        title: '小米',
                        proList: ['米1', '米2', '米3', '米4']
                    },
                    {
                        title: '苹果',
                        proList: ['果1', '果2', '果3', '果4']
                    }
                ]
            }
        },
        methods: {},
    }

    const vm = Vue.createApp(app).mount('#app')
</script>

</html>